<template>
    <div>
        <el-button type="primary" @click="newBulletinDialogVisible = true">{{$t('bulletin.publish')}}</el-button>
        <el-table :data="bulletinList" style="width: 100%" stripe v-loading="bulletinList === null">
            <el-table-column width="80" prop="ID" label="ID"/>
            <el-table-column prop="Title" :label="$t('bulletin.title')"/>
            <el-table-column prop="Content" :label="$t('bulletin.content')"/>
            <el-table-column :label="$t('general.create_at')" width="200"
                             :formatter="(row)=>utils.FormatGoTime(row.CreatedAt)"/>
            <el-table-column :label="$t('general.operate')" width="300">
                <template v-slot="scope">
                    <el-button
                            size="small"
                            @click="()=>{Object.assign(editBulletinForm, JSON.parse(JSON.stringify(scope.row))); editBulletinDialogVisible = true}">
                        {{$t('general.edit')}}
                    </el-button>

                    <el-popconfirm
                            :confirmButtonText="$t('general.confirm_cancel')"
                            :cancelButtonText="$t('general.cancel')"
                            icon="el-icon-info"
                            iconColor="red"
                            :title="$t('bulletin.delete_title')"
                            @confirm="handleDelete(scope.row.ID)"
                    >
                    <template #reference>
                        <el-button size="small" type="danger">{{$t('general.delete')}}</el-button>
                    </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- Publish bulletin -->
        <el-dialog :title="$t('bulletin.publish')" v-model="newBulletinDialogVisible">
            <el-form :model="newBulletinForm" label-width="80px">
                <el-form-item :label="$t('bulletin.title')">
                    <el-input v-model="newBulletinForm.Title"/>
                </el-form-item>
                <el-form-item :label="$t('bulletin.content')">
                    <el-input type="textarea" :rows="3" :placeholder="$t('bulletin.content_placeholder')"
                              v-model="newBulletinForm.Content"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="onNewBulletin">{{$t('bulletin.publish')}}</el-button>
        </el-dialog>

        <!-- Edit bulletin -->
        <el-dialog :title="$t('bulletin.edit')" v-model="editBulletinDialogVisible">
            <el-form :model="editBulletinForm" label-width="80px">
                <el-form-item :label="$t('bulletin.title')">
                    <el-input v-model="editBulletinForm.Title"/>
                </el-form-item>
                <el-form-item :label="$t('bulletin.content')">
                    <el-input type="textarea" :rows="3" placeholder="$t('bulletin.content_placeholder')"
                              v-model="editBulletinForm.Content"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="handleEdit">{{$t('bulletin.edit')}}</el-button>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getCurrentInstance } from 'vue';
import { useI18n } from 'vue-i18n'
import utils from '@/utils.js'
const { proxy } = getCurrentInstance()
const { t } = useI18n()

const newBulletinDialogVisible = ref(false)
const editBulletinDialogVisible = ref(false)

const bulletinList = ref(null)
const editBulletinForm = reactive({
                Title: '',
                Content: ''
            })
const newBulletinForm = reactive({
                Title: '',
                Content: ''
            })
        
onMounted(() => {
            getBulletin()
        })
        
function getBulletin() {
                utils.GET('/manager/bulletins').then(res => {
                    bulletinList.value = res
                }).catch(err => proxy.$message({message: err, type: 'error'}))
            }

function onNewBulletin() {
                utils.POST('/manager/bulletin', newBulletinForm).then(res => {
                    newBulletinDialogVisible.value = false
                    // Clean form.
                    Object.assign(newBulletinForm, {
                        Title: '',
                        Content: ''
                    })
                    proxy.$message({message: res, type: 'success'})
                    getBulletin()
                }).catch(err => proxy.$message({message: err, type: 'error'}))
            }

function handleEdit() {
                utils.PUT('/manager/bulletin', editBulletinForm).then(res => {
                    editBulletinDialogVisible.value = false
                    proxy.$message({message: res, type: 'success'})
                    getBulletin()
                }).catch(err => proxy.$message({message: err, type: 'error'}))
            }

function handleDelete(id) {
                utils.DELETE('/manager/bulletin?id=' + id).then(res => {
                    proxy.$message({message: res, type: 'success'})
                    getBulletin()
                }).catch(err => proxy.$message({message: err, type: 'error'}))
            }
</script>

<style scoped>

</style>